<template>
  <div>
    X: {{points.x}}
    Y: {{points.y}}
  </div>
</template>

<script>
import { point } from '@/hooks/usePoint'
export default {
  name: 'HookPractice',
  setup() {
    // const point = reactive({
    //     x: 0,
    //     y:0
    // })
    // const chosePoint = (event) => {
    //   point.x = event.pageX
    //   point.y = event.pageY
    // }

    // onMounted(() => {
    //   window.addEventListener('click', chosePoint)
    // })
    // onBeforeUnmount(() => {
    //   window.removeEventListener('click', chosePoint)
    // })

    let points = point()

    

    return {
      points
    }
      
  }
}
</script>